import React from 'react';
import { connect } from 'react-redux'
// 展示组件
const Index = (props) => {
  const { todos, count, add, change, del } = props
  return (
    <div>
      <ul>
        {
          todos.length > 0 && todos.map(v=> {
            return (
              <li key={v.id}
                style={{ 
                  textDecoration: v.completed ? 'line-through': 'none',
                  color: v.completed ? 'red': '#000'
                }}>
                <b>{v.text}</b>
                <b onClick={ () => del(v.id) }>X</b>
                <button onClick={ () => change(v.id) }>切换完成状态</button>
              </li>
            )
          })
        }
      </ul>
      <h1>{ count }</h1>
      <button onClick={ add }>+1</button>
    </div>
  );
}

const mapStateToPorps = (state) => {
  return {
    // 这里对象的键值对都会绑定在组件的props
    // 属性
    todos: state.todos,
    count: state.count
  }
}

const mapDispatchToProps = dispatch => {
  // 这里对象的键值对都会绑定在组件的props
  // 方法
  return {
    add() {
      dispatch({ type: 'add' })
    },
    change(id) {
      dispatch({ type: 'change', id })
    },
    del(id) {
      dispatch({ type: 'del', id })
    }
  }
}
export default connect(mapStateToPorps, mapDispatchToProps)(Index);
